<html>
    <head>
        <title>依赖注入</title>
    </head>
    <body>
        <script>
            // 4、依赖注入
                                         /*
                                             在此之前，我们在描述 "访问父组件实例" 的时候，展示给一个类似这样的例子：

                                                    <google-map>
                                                        <google-map-region v-bind:shape="cityBoundaries">
                                                            <google-map-markers v-bind:place="iceCreamShops"></google-map-markers>
                                                        </google-map-region>
                                                    </google-map>


                                             在这个组件里，所有<google-map> 的后代都需要访问一个 getMap 方法，以便知道要跟哪个地图进行交互。
                                             不幸的是，使用 $parent 属性无法很好的扩展到更深层级的嵌套组件上。

                                             这也是依赖注入的用武之地，它用到了两个新的实例选项:  "provide" 和 "inject"
                                         */
                                          
                                         /*
                                             provide 选项允许我们指定我们想要提供给都带组件的 数据/方法。
                                             在这个例子中，我们想要给所有后代组件提供一个名为"getMap"的方法，以便他们可以访问到那个地图：
                                         */
                                         provide:function(){   // provide 选项是一个对象，它提供了我们想要提供给后代组件的数据/方法。
                                                    return {
                                                        getMap:this.getMap
                                            }
                                         }

                                        // 然后再任何后代组件里，我们都可以使用inject 选项来接收指定的我们想要添加在这后代组件实例上的属性(propperty)
                                                inject:['getMap']

                                        /*
                                            你可以在"官网教程与本处对应的位置"看到完整的示例。
                                            相比 $parent 来说，这个用法可以让我们在"任意后代组件"中访问"getMap"方法，而不需要暴露真个<google-map>组件实例。
                                            这允许我们更好的持续研发该组件，而不需要担心我们可能会改变/移除一些子组件依赖的东西。
                                            同时，这些组件之间的接口是始终明确定义的，就和 props 一样。


                                            实际上，你可以把依赖注入看作一部分"大范围有效的prop"，除了：
                                                 ①、祖先组件不需要知道哪些后代使用了它提供的 property
                                                 ②、后代组件不需要知道被注入的 property 是来自哪里。
                                        */

                                        /*
                                            然而，依赖注入还是有负面影响的。
                                            它将你应用程序中的组件与它们当前的组织方式耦合在一起了，是重构变得更加困难。
                                            同时所提供的 property 是"非响应式"的。
                                            这是出于设计的考虑，因为使用它们来创建一个中心化规模化的数据跟使用 $root 做这件事都是不够好的。
                                            如果你想要共享的这个propery 是你的应用特有的，而不是通用化的，或者如果你想在祖先组件中更新所提供的数据，
                                            那么这意味着你可能需要换用一个像Vuex 这样的"状态管理方案"了。
                                        */
        </script>
    </body>
</html>